<template>
  <div class="content">
    <v-chart :option="chartOption" autoresize></v-chart>
    <!-- <Carousel v-model="current" dots="none">
        <CarouselItem>
          <v-chart :option="chartOption" autoresize style="height: 670px;"></v-chart>
        </CarouselItem>
        <CarouselItem>
          <v-chart :option="chartOption" autoresize style="height: 670px;"></v-chart>
        </CarouselItem>
    </Carousel> -->
  </div>
</template>

<script>
import { getShow } from "@/api/organ/business";
import * as echarts from "echarts";
export default {
  components: {},
  data() {
    return {
      current: 0,
      chartOption: {
        color: ["#1E6FFF", "#FFA901", "#01D1FF", "#3CD495"],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          //   orient: "vertical",
          x: "right", //可设定图例在左、右、居中
          y: "top", //可设定图例在上、下、居中
          padding: [10, 50, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
          itemWidth: 16, // 宽
          itemHeight: 16, // 高
          data: [],
        },
        calculable: true,
        grid: {
          top: "12%",
          left: "1%",
          right: "1%",
          bottom: "1%",
          containLabel: true,
        },
        // dataZoom:[
        //     {
        //         show: true,
        //         height: 10,
        //         xAxisIndex: [
        //             0
        //         ],
        //         filterMode: 'empty',
        //         bottom: '5%',
        //         start: 0,
        //         end: 45,
        //         handleIcon:'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
        //         handleSize: '100%', // 两边的按钮大小
        //         handleStyle: {
        //             color: "#fff"
        //         },
        //         textStyle: {
        //             color: 'blue'
        //         },
        //         borderColor: '#358efb'
        //     },
        // ],
        xAxis: [
          {
            type: "category",
            axisTick: {
              // 轴刻度
              show: true,
            },
            axisLine: {
              // 轴线
              show: true,
              color: "#E6E6E6",
            },
            // prettier-ignore
            data: ['肉','蛋','鸡','鸭'],
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位:  元 / 人 / 天",
            nameTextStyle: {
              padding: [1, 0, 30, 30],
            },
          },
        ],
        series: [
          {
            name: "标准",
            type: "bar",
            data: [],
            barWidth: 16, //柱图宽度
            barGap: "50%", // 柱图间距离
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示数值
                  position: "top", //数值在上方显示
                  textStyle: {
                    //数值样式
                    color: "#666666", //字体颜色
                    fontSize: 14, //字体大小
                  },
                },
              },
            },
          },
          {
            name: "领报",
            type: "bar",
            data: [],
            barWidth: 16, //柱图宽度
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示数值
                  position: "top", //数值在上方显示
                  textStyle: {
                    //数值样式
                    color: "#666666", //字体颜色
                    fontSize: 14, //字体大小
                  },
                },
              },
            },
          },
          {
            name: "采购",
            type: "bar",
            data: [],
            barWidth: 16, //柱图宽度
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示数值
                  position: "top", //数值在上方显示
                  textStyle: {
                    //数值样式
                    color: "#666666", //字体颜色
                    fontSize: 14, //字体大小
                  },
                },
              },
            },
          },
          {
            name: "消耗",
            type: "bar",
            data: [],
            barWidth: 16, //柱图宽度
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示数值
                  position: "top", //数值在上方显示
                  textStyle: {
                    //数值样式
                    color: "#666666", //字体颜色
                    fontSize: 14, //字体大小
                  },
                },
              },
            },
          },
        ],
      },
    };
  },
  props: {
    id: {
      type: String,
      default: "",
    },
  },
  mounted() {
    this.getShowApi();
  },
  methods: {
    getShowApi() {
      this.chartOption.legend.data = [];
      return new Promise((resolve) => {
        getShow({
          publishId: this.id,
          type: 4,
        }).then((res) => {
          if (res.code === 1) {
            res.data.dataList.forEach((element) => {
              this.chartOption.legend.data.push(element.key);
            });
            this.chartOption.xAxis[0].data = res.data.date;
            this.chartOption.series[0].name = res.data.dataList[0].key;
            this.chartOption.series[1].name = res.data.dataList[1].key;
            this.chartOption.series[2].name = res.data.dataList[2].key;
            this.chartOption.series[3].name = res.data.dataList[3].key;
            this.chartOption.series[0].data = res.data.dataList[0].value;
            this.chartOption.series[1].data = res.data.dataList[1].value;
            this.chartOption.series[2].data = res.data.dataList[2].value;
            this.chartOption.series[3].data = res.data.dataList[3].value;
            this.$emit("titleDate", res.data.titleDate);
            resolve();
          }
        });
      });
    },
  },
};
</script>
<style lang="less" scoped>
.content {
  height: 100%;
  width: 100%;
}
</style>